<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    body{
        margin: 0;

    }
    div{
        width: 1000px;
        margin: 0 auto;
        text-align: center;
        /*文本居中对齐*/
    }
    img{
        width: 32%;
    }
    img:nth-child(1):hover{
        transform: scale(1.05);
        /*变换*/
        transition: 0.5s;
        border: 1px solid #f00;
    }
    img:nth-child(2):hover{
        transform: rotate(10deg);
        transition: 0.5s;
    }
    img:nth-child(3):hover{
        opacity:0.5;
        transition: 0.5s;
    }
   </style>

</head>
<body>
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >
<img src="IMG.JPG" >

</body>
</html>